import {createContext, useContext} from "react";

// 1. createContext方法创建一个上下文对象
const Context = createContext();

function App(){
    const msg = 'this is App message';
    return (
        <div>
            {/* 2. 在顶层组件 通过Provider组件提供数据 */}
            <Context.Provider value={msg}>
                this is App
                <A/>
            </Context.Provider>
        </div>
    )
}

function A(){
    return (
        <div>
            this is A
            <B/>
        </div>
    )
}


function B(){
    // 3. 在底层组件 通过useContext钩子函数使用数据
    const msg = useContext(Context);

    return (
        <div>
            this is B: {msg}
        </div>
    )
}

export default App;